@import "compass";
@import "animate";


@font-face{
	font-family: "Entypo";
	src: url('../fonts/entypo.eot');
	src: 	url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
			url('../fonts/entypo.woff') format('woff'),
			url('../fonts/entypo.ttf') format('truetype'),
			url('../fonts/entypo.svg#EntypoRegular') format('svg');
	font-weight: normal;
	font-style:  normal;
}

.notifications {
	position: fixed;
	//top: 0; left: 0; right: 0;
	top: 10px; 
	right: 20px;
	width: 75%;
	@include border-radius(6px);

	background-color: #FFF;
	z-index: 2000;
	color: #000;
	font: normal 12px HelveticaNeue, Helvetica, Arial, sans-sherif;
	@include background-image(linear-gradient(top,#FFF,#DBDBDB));
	@include box-shadow(0px 4px 30px rgba(0,0,0,0.5));
	
	.notification {
		cursor: pointer;
		border-bottom: 1px solide #C1C1C1;
		position: relative;
		@include box-shadow(0px 1px 0px #FFF);
		@include text-shadow(0px 1px 0px #FFF);
		@include border-radius(6px);
	}
	.notification.last-child {
		border-bottom: none;
		@include box-shadow(0px 0px 0px transparent);
	}
	h2 {
		padding: 10px 0;
		font-size: 14px;
		font-weight: bold;
		margin: 0px;
	}
	p {
		margin:0;
		padding:0;
		padding-bottom:10px;
	}
	.left {
		position: absolute;
		height: 100%; width: 30 px;
		padding: 0px 10px;
		top:0 ; left: 0;
		border-right: 1px solid rgba(0,0,0,0.2);		
	}
	.right {
		margin-left: 70px;
	}
	.icon {
		font-family: "Entypo";
		font-size: 60px;
		line-height: 0px;
		margin-top: 30px;
		text-align: center;	
	}

	.success {
		background-color: #63a153;
		color: #FFF;
		@include background-image(linear-gradient(top,#81c270,#63a153));
		@include text-shadow(rgba(0,0,0,0.4) 0px 1px 0px);
	}

	.error {
		background-color: #FA5650;
		color: #FFF;
		@include background-image(linear-gradient(top,#FA5650,#D13630));
		@include text-shadow(rgba(0,0,0,0.4) 0px 1px 0px);
	}
}